<template>
    <div></div>
</template>

<script setup>
    import { reactive, ref } from "vue";
    import { useRouter } from "vue-router";
    import { ElMessage } from "element-plus";
    import { localSet } from "@/utils";
    import { Lock, House, Monitor, UserFilled, InfoFilled } from "@element-plus/icons-vue";

    const router = useRouter();
    const loginForm = ref(null);
    const loading = ref(false);

    const loginData = reactive({
        username: "",
        password: "",
    });

    const rules = {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [
            { required: true, message: "请输入密码", trigger: "blur" },
            { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
        ],
    };

    const handleLogin = async () => {
        if (!loginForm.value) return;

        await loginForm.value.validate((valid) => {
            if (valid) {
                loading.value = true;

                // 模拟登录请求
                setTimeout(() => {
                    if (loginData.username === "admin" && loginData.password === "123456") {
                        const userInfo = {
                            username: loginData.username,
                            role: "admin",
                            id: 1,
                        };
                        const token = "mock-token-" + Date.now();

                        localSet("token", token);
                        localSet("userInfo", userInfo);

                        ElMessage.success("登录成功");
                        router.push("/");
                    } else {
                        ElMessage.error("用户名或密码错误");
                    }
                    loading.value = false;
                }, 1000);
            }
        });
    };
</script>

<style scoped>
    
</style>
